<template>
      <!-- 新增和编辑学科弹框 -->
      <el-dialog
      :title="isEdit ? '编辑学科' :'新增学科'"
      :visible.sync="dialogVisible"
      @close="handleClose"
      width="30%"
     >
      <span>
        <el-form ref="form" :model="formData" :rules="rules"  label-width="80px">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="formData.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="formData.isFrontDisplay"></el-switch>
          </el-form-item>
          </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { add as subjectAdd, detail as subjectDetail, update as subjectUpdate } from '../../api/hmmm/subjects'

export default {
  props: {
    isEdit: {
      type: Boolean,
      required: true
    },
    getSubjectList: {
      type: Function,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // form表单数据
      formData: {
        subjectName: '', // 学科名称
        isFrontDisplay: true // 是否显示
      },
      isDisplay: 1, // 转换后的是否显示
      dialogVisible: false, // 弹框是否显示
      // isEdit: false // 是否编辑
      // 表单校验规则
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogVisible = false
    },
    // 弹层关闭
    handleClose () {
      // 清空输入框
      this.formData.subjectName = ''
      console.log(this.formData.subjectName)
      // 重置表单(包括校验规则)
      this.$refs.form.resetFields()
    },
    // 新增学科
    async addSubject () {
      this.formData.isFrontDisplay ? this.isDisplay = 1 : this.isDisplay = 0
      // 发送请求
      const res = await subjectAdd({ subjectName: this.formData.subjectName, isFrontDisplay: this.isDisplay })
      console.log(res)
      if (res.status === 200) {
        this.$message.success('新增成功')
      }
    },
    // 获取学科详情
    async getsubjectDetail (id) {
      const { data } = await subjectDetail({ id })
      // console.log(data)
      // 学科名称
      this.formData.subjectName = data.subjectName
      // 是否显示
      this.isDisplay = data.isFrontDisplay
      this.isDisplay ? this.formData.isFrontDisplay = true : this.formData.isFrontDisplay = false
    },
    // 编辑学科
    async editSubject () {
      // 是否显示为true时  转换成1  否则为0
      this.formData.isFrontDisplay ? this.isDisplay = 1 : this.isDisplay = 0
      const res = await subjectUpdate({ id: this.id, subjectName: this.formData.subjectName, isFrontDisplay: this.isDisplay })
      // console.log(res)
      if (res.status === 200) this.$message.success('修改成功')
    },
    // 弹框确定按钮
    submit () {
      // 兜底校验
      this.$refs.form.validate(valid => {
        if (valid) {
          // 新增学科
          this.isEdit ? this.editSubject() : this.addSubject()
          // 获取学科列表  调用父组件的方法
          this.getSubjectList()
          // 弹层隐藏
          this.dialogFormH()
        }
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
